<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	</head>
	<body>
		<div id="app">
			<el-table
				:data="array"
				border
				stripe
				style="">
			<el-table-column
					fixed
					prop="id"
					label="ID"
					width="260">
			</el-table-column>
			<el-table-column
					prop="username"
					label="用户名"
					width="320">
			</el-table-column>
			<el-table-column
					prop="password"
					label="密码"
					width="320">
			</el-table-column>
			<el-table-column
					prop="role"
					label="角色"
					width="320">
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button
							size="mini"
							type="info"
							icon="el-icon-edit"
							@click="edit(scope.row)">修改</el-button>
					<el-button
							size="mini"
							type="danger"
							icon="el-icon-delete"
							@click="del(scope.row)">删除</el-button>
				</template>
			</el-table-column>
			</el-table>
			<el-pagination style="margin-top: 20px;float: right;position: relative;top: 0px;"
						   background
						   layout="prev, pager, next"
						   :page-size="size"
						   :total="total"
						   :current-page.sync="page"
						   @current-change="change">
			</el-pagination>
		</div>
	</body>
	<script src="js/vue.js"></script>
	<script src="js/elementui.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
	<script>
	  new Vue({
		el: '#app',
		methods: {
			change(currentPage){
				let _this = this
				axios.get('http://localhost:8080/list?page='+currentPage+'&size='+_this.size).then(function (resp) {
					_this.array = resp.data.list
					_this.total = resp.data.total
				})
			}
		},
		mounted: function () {
			let _this = this
			axios.get('http://localhost:8080/list?page='+_this.page+'&size='+_this.size).then(function (resp) {
				_this.array = resp.data.list
				_this.total = resp.data.total
			})
		},
		data(){
			return {
				array:'',
				page:1,
				size:2,
				total:''
			}
		}
	  })
	</script>
</html>
